<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            border: 1px solid transparent;
        }

        .active {
            border: 1px solid red !important;
        }
    </style>
</head>

<body>
    <div id="demo" class="one two three" title="hello"></div>
    <ul class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
    </ul>
</body>
<script>

    // 伪数组(类数组) 
    // 有数组的结构( 1.有length 2. 有下标,可以通过下标取值,下标赋值看数据特性(arguments可以下标赋值)   3.可以被循环遍历(不建议使用for...in)),但是不能使用数组的方法

    // 常见的伪数组
    // arguments  => 函数的内置参数,用于存放函数在调用时实际参数的集合

    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName() 
    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // document.querySelectorAll()  => 有forEach

    // Element.classList

    // var demo = document.getElementById("demo");
    // console.log(demo.className);
    // console.log(demo.classList);


    var liList = document.querySelectorAll(".list li"); //伪数组
    console.log(liList);

    console.log(liList.length);

    console.log(liList[0]);
    liList[0] = "123123";

    // for (var i = 0; i < liList.length; i++) {
    //     console.log(liList[i]);
    // }

    // for (var item of liList) {
    //     console.log(item);
    // }

    for (var i in liList) {
        console.log(i);
    }


    // var arr = [1, 2, 3, 4];  //数组
    // console.log(arr);






</script>

</html>